<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10_父子组件通信案例</title>
</head>
<!-- 
    在子组件里做一件事: 通过 input 对 number1 做一个双向绑定,vue实例里的 num1也发生改变
-->

<body>
    <div id="app">
        <cpn :number1="num1" :number2="num2" @num1change="fatherNum1Change" @num2change="fatherNum2Change"></cpn>
    </div>
</body>
<script src="../vue.js"></script>
<template id="cpn">
    <div>
        <h2>props里的number1-----{{number1}}</h2>
        <h2>data里的dnumber1-----{{dnumber1}}</h2>
        <!-- <input type="text" v-model="number1"> 不推荐直接绑定 props 里的 number1-->
        
        <!-- <input type="text" v-model="dnumber1"> -->
        <!-- v-on:input 指的是 js 里的原生 oninput 事件 -->
        <input type="text" v-bind:value="dnumber1" v-on:input="num1Input">

        <h2>props里的number2-----{{number2}}</h2>
        <h2>data里的dnumber2-----{{dnumber2}}</h2>
        <!-- <input type="text" v-model="number2"> 不推荐-->
        
        <!-- <input type="text" v-model="dnumber2">  -->
        <input type="text" v-bind:value="dnumber2" v-on:input="num2Input">
    </div>
</template>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            num1: 1,
            num2: 0
        },
        methods: {
            fatherNum1Change(value) {
                //console.log(typeof value); 这是个字符串实际期望整型
                this.num1 = parseInt(value)
            },
            fatherNum2Change(value) {
                this.num2 = parseInt(value)
            }
        },
        components: {
            cpn: {
                template: '#cpn',
                props: {
                    //vue官方推荐这里面的东西必须要通过父组件来修改,不能通过在组件里使用双向绑定来改变值
                    number1: Number,
                    number2: Number
                },
                data() {
                    return {
                        dnumber1: this.number1,
                        dnumber2: this.number2
                    }
                },
                methods: {
                    num1Input(event) {
                        this.dnumber1 = event.target.value
                        this.$emit('num1change', this.dnumber1)

                        //这里也可以修改 dnumber2 的值
                        this.dnumber2 = this.dnumber1 * 1000
                        this.$emit('num2change', this.dnumber2)
                    },
                    num2Input(event) {
                        this.dnumber2 = event.target.value
                        this.$emit('num2change', this.dnumber2)
                    }
                }
            }
        }
    })
</script>

</html>